<!doctype html>
<html lang="en">
  <head>
<!--    <link rel="stylesheet" href="http://10.70.94.96:8080/geoserver/openlayers3/ol.css" type="text/css"> -->
    <link rel="stylesheet" href="https://openlayers.org/en/v4.4.2/css/ol.css" type="text/css">
   
    <style>
      .map {
            width: 768px;
            height: 768px;
            border: 1px solid black;
      }
      #location {
            float: left;
      }
    </style>
<!--    <script src="http://10.70.94.96:8080/geoserver/openlayers3/ol.js" type="text/javascript"></script> -->
      <script src="https://openlayers.org/en/v4.4.2/build/ol.js" type="text/javascript"></script>
    <title>TestOpenLayer</title>
  </head>
  <body>

    <div id="map" class="map"></div>
    <div id="location"></div>
   <div id="info">&nbsp;</div>
    <script type="text/javascript">
    var projection = ol.proj.get('EPSG:4326');

    var raster = new ol.layer.Tile({
      source: new ol.source.OSM({})
    });

    var vector = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: '../../statics/kml/testkml.kml',
        format: new ol.format.KML()
      })
    });
    
    var geojsonObj = {
    	    "type": "FeatureCollection",
    	    "features": [{
    	            "type": "Feature",
    	            "geometry": {
    	                "type": "Point",
    	                "coordinates": [8.0, 47.1]
    	            },
    	            "properties": {
    	                "prop0": "value0"
    	            }
    	        }, {
    	            "type": "Feature",
    	            "geometry": {
    	                "type": "LineString",
    	                "coordinates": [[7.1, 47.0], [8.5, 47.0], [9.9, 47.0]]
    	            },
    	            "properties": {
    	                "prop0": "value0",
    	                "prop1": 0.0
    	            }
    	        }, {
    	            "type": "Feature",
    	            "geometry": {
    	                "type": "Polygon",
    	                "coordinates": [[1.1, 48.0], [5.5, 48.0], [10.9, 48.0]]
    	            },
    	            "properties": {
    	                "prop0": "value0",
    	                "prop1": {
    	                    "this": "that"
    	                }
    	            }
    	        }
    	    ]
    	}
    var jsonLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: (new ol.format.GeoJSON()).readFeatures(geojsonObj)
        })
      });

    var map = new ol.Map({
      layers: [raster, vector, jsonLayer],
      target: document.getElementById('map'),
      view: new ol.View({
        center: [7.6,47.40],
        projection: projection,
        zoom: 10
      })
    });

    var displayFeatureInfo = function(pixel) {
      var features = [];
      map.forEachFeatureAtPixel(pixel, function(feature) {
        features.push(feature);
      });
      if (features.length > 0) {
        var info = [];
        var i, ii;
        for (i = 0, ii = features.length; i < ii; ++i) {
          info.push(features[i].get('name'));
        }
        document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
        map.getTarget().style.cursor = 'pointer';
      } else {
        document.getElementById('info').innerHTML = '&nbsp;';
        map.getTarget().style.cursor = '';
      }
    };

    map.on('pointermove', function(evt) {
      if (evt.dragging) {
        return;
      }
      var pixel = map.getEventPixel(evt.originalEvent);
      displayFeatureInfo(pixel);
    });

    map.on('click', function(evt) {
      displayFeatureInfo(evt.pixel);
    });
    </script>
  </body>
</html>